
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>给董宇的表白</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            overflow: hidden;
            background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
            background-size: 400% 400%;
            animation: gradient 15s ease infinite;
            font-family: 'Arial', sans-serif;
            color: white;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        @keyframes gradient {
            0% {background-position: 0% 50%;}
            50% {background-position: 100% 50%;}
            100% {background-position: 0% 50%;}
        }

        h1 {
            font-size: 4rem;
            margin-bottom: 2rem;
            text-shadow: 0 0 10px rgba(255,255,255,0.5);
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% {transform: scale(1);}
            50% {transform: scale(1.1);}
            100% {transform: scale(1);}
        }

        .heart {
            position: absolute;
            pointer-events: none;
            animation: float 6s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% {transform: translateY(0) rotate(0deg);}
            50% {transform: translateY(-100px) rotate(10deg);}
        }

        .message {
            font-size: 2rem;
            max-width: 800px;
            line-height: 1.6;
            margin-bottom: 3rem;
            opacity: 0;
            transform: translateY(50px);
            animation: fadeIn 2s forwards 1s;
        }

        @keyframes fadeIn {
            to {opacity: 1; transform: translateY(0);}
        }

        .btn {
            background: white;
            color: #e73c7e;
            border: none;
            padding: 15px 30px;
            font-size: 1.5rem;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            opacity: 0;
            animation: fadeIn 2s forwards 2s;
        }

        .btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.3);
        }

        .music-control {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: rgba(255,255,255,0.2);
            padding: 10px;
            border-radius: 50%;
            cursor: pointer;
            z-index: 100;
        }
          .text {
            position: absolute;
            z-index: 9999999;
            font-weight: bold;
            user-select: none;
        }
        /* 手机设备 */
        @media only screen and (max-width: 600px) {
        body { font-size: 14px; }
        }
        /* 平板设备 */
        @media (min-width: 601px) and (max-width: 1024px) {
        body { font-size: 16px; }
        }
        /* 桌面设备 */
        @media (min-width: 1025px) {
        body { font-size: 18px; }
        }

    </style>
</head>
<body>
    <h1><marquee behavior="alternate" direction="right" behavior="scroll" scrollamount="10" width="1000px">宇宝，我喜欢你！</marquee></h1>
    
    <div class="message">
        从第一次见到你，我的心就被你俘获了。<br>
        你的笑容像阳光一样温暖，你的声音像音乐一样动听。<br>
        我想和你一起看遍世间美景，尝遍人间美味。<br>
        你愿意和我一起创造属于我们的故事吗？
    </div>
    
    <button class="btn" id="confettiBtn">点击查看我的心意</button>
    
    <div class="music-control" id="musicControl">🎵</div>
    
    <audio id="bgMusic" loop>
        <source src="https://music.163.com/song/media/outer/url?id=27588737.mp3" type="audio/mpeg">
    </audio>

    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.4.0/dist/confetti.browser.min.js"></script>
    <script>
        // 创建漂浮的心形
        function createHearts() {
            const heart = document.createElement('div');
            heart.innerHTML = '❤️';
            heart.className = 'heart';
            heart.style.left = Math.random() * 100 + 'vw';
            heart.style.top = Math.random() * 100 + 'vh';
            heart.style.fontSize = (Math.random() * 20 + 10) + 'px';
            heart.style.animationDuration = (Math.random() * 6 + 3) + 's';
            document.body.appendChild(heart);
            
            setTimeout(() => {
                heart.remove();
            }, 10000);
        }
        
        setInterval(createHearts, 300);
        
        // 音乐控制
        const musicControl = document.getElementById('musicControl');
        const bgMusic = document.getElementById('bgMusic');
        
        musicControl.addEventListener('click', () => {
            if (bgMusic.paused) {
                bgMusic.play();
                musicControl.textContent = '🔊';
            } else {
                bgMusic.pause();
                musicControl.textContent = '🎵';
            }
        });
        
        // 点击按钮触发彩带效果
        const confettiBtn = document.getElementById('confettiBtn');
        confettiBtn.addEventListener('click', () => {
            confetti({
                particleCount: 150,
                spread: 60,
                origin: { y: 0.6 }
            });
            
            confettiBtn.textContent = '❤️ 我的心永远属于你 ❤️';
            confettiBtn.style.backgroundColor = '#e73c7e';
            confettiBtn.style.color = 'white';
        });
        /* 鼠标特效 */
		window.addEventListener('load', function () {
		        let body = document.body;
		        let content = ["❤去活出你自己。❤", "❤《爱就一个字》❤",
		            "❤《星辰大海》❤", "❤《千千万万》❤", "❤《我在等你》❤","❤《早点早点》❤",
		            "❤《宇宝,喜欢你!!!》❤", "❤《Peace&Love》❤", "❤《带你回家》❤", "❤《等我回家》❤",
		            "❤《宇宝,我爱你!!!》❤",
		            "❤《关于你的梦》❤", "❤《靠近一点点》❤",
		            "❤《This Is Love》❤", "❤《爱你3000》❤",
		            "❤《宇宝,我要你!!!》❤",
		            "❤《所念皆星河》❤",
		            "❤《宇宝,做我女朋友!!!》❤"
		        ] 
		        function debounce(func, wait) {
				    let timeout;
				    return function(...args) {
				        const context = this;
				        clearTimeout(timeout);
				        timeout = setTimeout(() => func.apply(context, args), wait);
				    };
				}
				
				// 使用防抖后的mousemove事件
				document.addEventListener('mousemove', debounce(function(e) {
				    let x = e.pageX;
		            let y = e.pageY; //当前坐标
		            let randContent = Math.ceil(Math.random() * content.length);
		            let text = new Text(x, y, randContent);
		            let span = document.createElement('span')
		            span.style.color = text.getRandom();
		            text.create(span);
		            setTimeout(function () {
		                text.out(span)
		            }, 1900);
				}, 100)); // 在100毫秒内只执行最后一次调用

		        
		        
		        
//				function debounce(func, wait) {
//				    let timeout;
//				    return function(...args) {
//				        const context = this;
//				        clearTimeout(timeout);
//				        timeout = setTimeout(() => func.apply(context, args), wait);
//				    };
//				}
//				
//				// 使用防抖后的mousemove事件
//				document.addEventListener('mousemove', debounce(function(e) {
//				    let x = e.pageX;
//		            let y = e.pageY; //当前坐标
//		            let randContent = Math.ceil(Math.random() * content.length);
//		            let text = new Text(x, y, randContent);
//		            let span = document.createElement('span')
//		            span.style.color = text.getRandom();
//		            text.create(span);
//		            setTimeout(function () {
//		                text.out(span)
//		            }, 1900);
//				}, 50)); // 在100毫秒内只执行最后一次调用

		        function Text(x, y, rand) {
		            this.x = x;
		            this.y = y;
		            this.rand = rand;
		        }
		        Text.prototype.create = function (_this) {
		            let body = document.body;
		            _this.innerHTML = content[this.rand - 1];
		            _this.className = 'text'
		            _this.style.top = this.y - 20 + 'px'
		            _this.style.left = this.x - 50 + 'px'
		            _this.style.animation = 'remove 2s'
		            body.appendChild(_this);
		            let i = 0
		            setInterval(() => {
		                _this.style.top = this.y - 20 - i + 'px'
		                i++
		            }, 10);
		        }
		        Text.prototype.out = function (_this) {
		            _this.remove()
		        }
		        //设置随机颜色
		        Text.prototype.getRandom = function () {
		            let allType = '0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f'; //16进制颜色
		            let allTypeArr = allType.split(','); //通过','分割为数组
		            let color = '#';
		            for (var i = 0; i < 6; i++) {
		                //随机生成一个0-16的数
		                var random = parseInt(Math.random() * allTypeArr.length);
		                color += allTypeArr[random];
		            }
		            return color; //返回随机生成的颜色
		        }
		    });
		window.onload = function(){
	        	musicControl.click();
	        };
    </script>
</body>
</html>
